<!-- 教师详情页面 -->
<template>
    <view class="main-container">
        <!-- 顶部橙色标题栏 -->
        <view class="header-bar">
            <text class="back-icon" @click="goBack">←</text>
            <text class="header-title">教师详情</text>
        </view>

        <!-- 教师信息 -->
        <view class="teacher-info">
            <image :src="getfullurl(teacher)" class="teacher-avatar" mode="aspectFill" />
            <view class="teacher-name">{{ teacher.name }}</view>
            <view class="teacher-title" v-if="teacher.title">{{ teacher.title }}</view>
        </view>

        <!-- 教师介绍 -->
        <view class="teacher-section">
            <view class="section-title">教师介绍</view>
            <view class="section-content">
                <editor id="editor" v-model="editorinfo" class="ql-container" placeholder="开始输入..." showImgSize
                    @statuschange="onStatusChange" :read-only="true" @ready="onEditorReady">
                </editor>
            </view>
        </view>

    </view>
</template>

<script>
import { Platform } from '@/static/config.js';
import request from '@/common/request.js';

export default {
    data() {
        return {
            teacher: {},
            editorinfo: '',
            readOnly: true
        }
    },
    onLoad(options) {
        let _self = this;
        if (options.teacher) {
            this.teacher = JSON.parse(decodeURIComponent(options.teacher));
            // this.editorinfo = this.teacher.teacherremark || '';
            request({
                url: Platform.api_requestUrl + '/system/notice/' + _self.teacher.teacherdetail,
                method: 'GET',
            }).then(response => {
                if (response.code == 200) {
                    // 确保内容为HTML格式
                    const content = response?.data?.noticeContent || '';
                    _self.editorinfo = content;
                    // 延迟执行编辑器初始化，确保DOM已经渲染
                    setTimeout(() => {
                        _self.onEditorReady();
                    }, 100);
                } else {
                    uni.showToast({
                        title: '获取通知内容失败',
                        icon: 'none'
                    });
                }
            }).catch(error => {
                uni.showToast({
                    title: '获取通知内容失败',
                    icon: 'none'
                });
            });
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        getfullurl(item) {
            return Platform.api_requestUrl + '/' + item.teacherpath;
        },
        onEditorReady() {
            let _self = this;
            uni.createSelectorQuery().select('#editor').context((res) => {
                if (res && res.context) {
                    this.editorCtx = res.context;
                    if (_self.editorinfo) {
                        this.editorCtx.setContents({
                            html: _self.editorinfo
                        });
                    }
                }
            }).exec();
        },
        onStatusChange(e) {
            const formats = e.detail;
        }
    }
}
</script>

<style lang="scss">
.main-container {
    min-height: 100vh;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
}

.header-bar {
    background: #f26522;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
}

.back-icon {
    color: #fff;
    font-size: 24px;
    margin-right: 15px;
}

.header-title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    flex: 1;
    text-align: center;
}

.teacher-info {
    background: #fff;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.teacher-avatar {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    margin-bottom: 15px;
    object-fit: cover;
}

.teacher-name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.teacher-title {
    font-size: 14px;
    color: #666;
}

.teacher-section {
    background: #fff;
    margin-bottom: 10px;
    padding: 15px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
    
    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background: #f26522;
        border-radius: 2px;
    }
}

.section-content {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    flex: 1;
}

.ql-container {
    min-height: 200px;
    background: #fff;
    flex: 1;
	height: unset !important;
}
</style> 